<template>
  <div class="container">
    <el-table
        :data="userTable"
        border
        stripe
        style="width: 100%">
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="hospital"
          label="工作地点">
      </el-table-column>
      <el-table-column
          prop="role"
          label="身份">
        <template slot-scope="scope">
          <el-tag :effect="roleType[scope.row.role]" :type="roleType[scope.row.role]" effect="dark">
            {{ roleText[scope.row.role] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope" style="display: flex;align-items: center">
          <el-dropdown>
          <span class="el-dropdown-link">
            <el-button type="text" size="small">更改身份</el-button>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="changeUserRole(0,scope.row.username)">患者</el-dropdown-item>
              <el-dropdown-item @click.native="changeUserRole(1,scope.row.username)">医生</el-dropdown-item>
              <el-dropdown-item @click.native="changeUserRole(2,scope.row.username)">管理员</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button @click="deleteUser(scope.row)" type="text" size="small" style="margin-left: 10px">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {deleteUser, getUserList, updateUserRole} from "@/api/login";

export default {
  name: 'UserManagement',
  data() {
    return {
      userTable: [],
      roleText: {
        0: '患者',
        1: '医生'
      },
      roleType: {
        0: 'primary',
        1: 'success'
      }
    }
  },
  mounted() {
    this.getAllUser();
  },
  methods: {
    getAllUser() {
      getUserList().then(res => {
        this.userTable = res.data
      })
    },
    deleteUser(row) {
      deleteUser(row.username).then(res => {
        this.$message.success('删除用户成功')
        this.getAllUser();
      })
    },
    changeUserRole(role, username) {
      updateUserRole(role, username).then(res => {
        this.$message.success('更改身份成功')
        this.getAllUser();
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;
  animation: MoveIn .7s cubic-bezier(.4, 0, .2, 1);
}
</style>